<template>
  <BaseMainSlot :show-btn-box="true">
    <!-- 加工损耗量 -->
    <template v-slot:btn-box>
      <ActionBar
        :page-no="24"
        :add-active="true"
        :del-active="delActive"
        @add="showDialog"
        @del="del"
      />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">加工批次名称：</div>
            <el-select
              v-model="querylist.processBatchNo"
              placeholder="选择加工批次"
              clearable
            >
              <el-option
                v-for="item in processBatchList"
                :key="item.processBatchNo"
                :label="item.processBatchName"
                :value="item.processBatchNo"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工产品：</div>
            <el-select
              v-model="querylist.productMaterialNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in productionOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工附属品：</div>
            <el-select
              v-model="querylist.accessoriesMaterialNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in accessoriesMaterialList"
                :key="item.materialNo"
                :label="item.material.materialName"
                :value="item.materialNo"
              />
            </el-select>
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <tdtable
        :page="page"
        :prop-list="propList"
        :table-data="tableData"
        :show-index-column="showIndexColumn"
        :show-select-column="showSelectColumn"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:edit="{row}">
          <div v-if="row.processingAccessoriesNo" class="operate">
            <div class="pointer" @click="edit(row)">
              <i class="el-icon-edit"></i>修改
            </div>
            <div class="pointer del" @click="alonedDel(row)">
              <i class="el-icon-delete"></i>删除
            </div>
          </div>
        </template>
        <template v-slot:accessoriesQuantity="{row}">
          <span>{{ row.accessoriesQuantity }}{{ row.accessoriesUnitName }}</span>
        </template>
        <template v-slot:time="{row}">
          <span
            v-if="row.processingAccessoriesNo"
          >{{ row.completeStartTime }}--{{ row.completeEndTime }}</span>
        </template>
      </tdtable>
      <AddEditDialog
        :show="isShowAddEditDialog"
        :form-data-copy="formDatacopy"
        :process-batch-list="processBatchList"
        :unit-list="unitList"
        :accessories-material-list="accessoriesMaterialList"
        :production-options="productionOptions"
        :title-text="titleText"
        @closeDialog="closeDialog"
        @addEvent="addEvent"
      />
    </template>
  </BaseMainSlot>
</template>
<script>
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import ActionBar from "@/components/ActionBar/index1.vue";
import SearchBox from "@/components/SearchBox/index.vue";
// import Pagination from "@/components/Pagination";
import AddEditDialog from "./components/add-edit-dialog.vue";
// import SelectButton from "@/components/equipTypeSelectButton/selcetButton.vue";
import tdtable from "@/components/table/index.vue";
import ProcessBatchApi from "@/api/processing-management/process-batch-manage/process-batch-creation/index";
import productionApi from "@/api/processing-management/basic-info-manage/processing-product-manage/index";
import UnitApi from "@/api/processing-management/basic-info-manage/data-item-manage/index";
import { mymixin } from "@/utils/mixin";
import processingAccessoryApi from "@/api/processing-management/basic-info-manage/processing-accessory-manage/index";
import Api from "@/api/processing-management/process-product-manage/process-accessory";
export default {
  name: "ProcessBatchQuery",
  components: {
    // Pagination,
    AddEditDialog,
    BaseMainSlot,
    // SelectButton,
    tdtable,
    SearchBox,
    ActionBar
  },
  mixins: [mymixin],
  data() {
    return {
      accessoriesMaterialList: [],
      unitList: [],
      handle: "",
      querylist: {
        processBatchName: "",
        productMaterialName: ""
      },
      handleSelectList: [],
      processBatchList: [],
      productionOptions: [], // 产品
      isShowAddEditDialog: false,
      isShowJobDialog: false,
      titleText: "加工损耗量",
      // 编辑表单入参
      editObject: {},
      scopeRow: {},
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      propList: [
        { prop: "processBatchName", label: "加工批次名称", minWidth: "100" },
        { prop: "productMaterialName", label: "加工产品名称", minWidth: "100" },
        {
          prop: "accessoriesMaterialName",
          label: "加工附属品名称",
          minWidth: "100"
        },
        {
          prop: "accessoriesQuantity",
          label: "加工附属品数量",
          minWidth: "100",
          slotName: "accessoriesQuantity"
        },
        {
          prop: "time",
          label: "加工时间",
          slotName: "time",
          minWidth: "200"
        },
        { label: "操作", minWidth: "120", slotName: "edit" }
      ],
      // 显示序号
      showIndexColumn: true,
      // 显示select
      showSelectColumn: true,
      formDatacopy: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getProcessBatchList();
    this.getProductionOptions();
    this.getUnitOptions();
    this.queryPageList();
    this.getAccessoriesList();
  },
  methods: {
    // 获取附属品选项
    getAccessoriesList() {
      processingAccessoryApi.queryList({}).then(res => {
        if (res.code === 1) {
          this.accessoriesMaterialList = res.data;
        }
      });
    },
    // 获取单位选择项
    getUnitOptions() {
      UnitApi.queryUnit().then(res => {
        if (res.code === 1) {
          this.unitList = res.data;
        }
      });
    },
    addEvent(e) {
      if (this.handle === "add") {
        Api.add(e).then(res => {
          if (res.code === 1) {
            this.$message.success("添加成功");
            this.queryPageList();
          }
        });
      }
      if (this.handle === "edit") {
        Api.edit(e).then(res => {
          if (res.code === 1) {
            this.$message.success("修改i成功");
            this.queryPageList();
          }
        });
      }
    },
    queryPageList() {
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: {
          ...this.querylist
        }
      };
      Api.getListByPageConditon(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.page.total = data.totalElements;
          this.tableData = data.content;
        }
      });
    },
    // 获取所有批次
    getProcessBatchList() {
      ProcessBatchApi.queryByConditionList({
        processBatchType: "自主生产",
        status: true
      }).then(res => {
        this.processBatchList = res.data || [];
      });
    },
    alonedDel(e) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          Api.noDel(e.processingAccessoriesNo).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    edit(row) {
      this.handle = "edit";
      this.formDatacopy = { ...row };
      this.isShowAddEditDialog = true;
    },
    // 查询
    search() {
      this.queryPageList();
    },
    // 获取产品选项
    getProductionOptions() {
      productionApi.queryByConditionList().then(res => {
        if (res.code === 1) {
          let list = [];
          res.data.forEach(item => {
            list.push({
              name: item.material.materialName,
              value: item.material.materialNo
            });
          });
          this.productionOptions = list;
        }
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      console.log(val);
      this.handleSelectList = [];
      this.handleSelectList = val.map(item => item.processingAccessoriesNo);
      if (this.handleSelectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 显示添加弹出框
    showDialog() {
      this.isShowAddEditDialog = true;
      this.handle = "add";
    },
    closeDialog() {
      this.isShowAddEditDialog = false;
    },
    // 批量删除
    del() {
      let params = {
        noList: this.handleSelectList
      };
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          Api.batchDel(params).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.operate {
  display: flex;
  justify-content: center;
  .del {
    color: #f56c6c;
    margin-left: 12px;
  }
}
::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0px;
  bottom: -18px;
}

::v-deep .el-form-item__label {
  min-width: 120px !important;
  text-align: end;
}
.total {
  position: absolute;
  top: 25px;
  left: 300px;
}

::v-deep .el-form-item.is-error {
  .el-input__inner {
    border-color: #f56c6c !important;
  }
}
.botton {
  background-color: #0091b7;
}
.pointer {
  cursor: pointer;
}
</style>
